<template>
  <div class="fonction">
    <div>
      <div>
        <div class="fon-item" @click="goto('http://www.jxfz.zjut.edu.cn/')">
          <img class="img" src="@/assets/fon1.png" />
        </div>
        主讲教师认定
      </div>
      <div>
        <div
          class="fon-item"
          @click="goto('https://zjut.fanya.chaoxing.com/portal')"
        >
          <img class="img" src="@/assets/fon2.png" />
        </div>
        教学水平评议
      </div>
      <div>
        <div class="fon-item">
          <img class="img" src="@/assets/fon3.png" />
        </div>
        会议直播
      </div>
      <div>
        <div class="fon-item">
          <img class="img" src="@/assets/fon4.png" />
        </div>
        微课录制
      </div>
      <div>
        <div class="fon-item">
          <img class="img" src="@/assets/fon5.png" />
        </div>
        跨校区直播
      </div>
      <div>
        <div class="fon-item">
          <img class="img" src="@/assets/fon6.png" />
        </div>
        资源制作
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const goto = (url: string) => {
  window.open(url, "_blank");
};
</script>
<style lang="scss" scoped>
.fonction {
  width: 100%;
  // padding: 0 22.5rem;
  margin-top: 3.375rem;
  margin-bottom: 3.125rem;
  display: flex;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 1.125rem;
  color: #0f2e4d;
  > div {
    width: 75rem;
    cursor: pointer;
    display: flex;
    // flex-direction: column;
    // align-items: center;
    justify-content: space-between;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  .fon-item {
    width: 5rem;
    height: 5rem;
    // background-color: pink;
    margin-bottom: 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 3.75rem;
      height: 3.75rem;
      transition: 0.7s;
    }

    .img:hover {
      transform: scale(1.3);
    }
  }
}
</style>
